<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import {
  HomeFilled,
  Avatar,
  MessageBox,
  Reading
} from '@element-plus/icons-vue'
import {useCounterStore} from "../../stores/counter"
import { useRoute } from 'vue-router';
const counter=useCounterStore()
const route=useRoute()
// console.log(counter.handleClose);

</script>
<template>
    <div class="aside">
      <el-aside :width="counter.handleClose?'64px':'160px'">
        <!-- <h5 class="mb-2">管理中心</h5> -->
         <el-menu
        :default-active="route.fullPath"
        class="el-menu-vertical-demo"
        :collapse="counter.handleClose"
        :collapse-transition="false"
         router
      >
      <el-menu-item index="/index">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
          <el-menu-item index="/center">
        <el-icon><HomeFilled /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
       <el-sub-menu index="2">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>用户管理</span>
          </template>
        <el-menu-item-group>
            <el-menu-item index="/useradd">添加用户</el-menu-item>
            <el-menu-item index="/userlist">用户列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
               <el-sub-menu index="3">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>新闻管理</span>
          </template>
        <el-menu-item-group>
            <el-menu-item index="/newsadd">创建新闻</el-menu-item>
            <el-menu-item index="/newslist">新闻列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
             <el-sub-menu index="4">
          <template #title>
            <el-icon><Reading /></el-icon>
            <span>产品管理</span>
          </template>
        <el-menu-item-group>
            <el-menu-item index="/productadd">添加产品</el-menu-item>
            <el-menu-item index="/productlist">产品列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
      </el-aside>
    </div>
</template>
<style scoped lang="less">
// .aside{
//     // height: 1000px;
// }
.el-aside{
    height: 100vh;
    // background: #8d8181;
}
</style>
